<template>
  <!--  站点信息-->
  <div id="SiteInformation">
    <div class="content-head">
      <h2>站点信息</h2>
    </div>
    <div class="content-body">
      <div>
        <h2>建站时间:</h2>
        <span>{{ websiteInfo.create_date }}</span>
      </div>
      <div>
        <h2>网站程序:</h2>
        <span>Django+vue</span>
      </div>
      <div>
        <h2>在线人数:</h2>
        <span>{{ websiteInfo.online_users }}</span>
      </div>
      <div>
        <h2>网站版本:</h2>
        <span>{{ websiteInfo.version }}</span>
      </div>
      <div>
        <h2>文章数量:</h2>
        <span>{{ websiteInfo.article_number }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "SiteInformation",
  computed: {
    ...mapState(['websiteInfo'])
  }
}
</script>

<style scoped lang="less">
/*站点信息*/
#SiteInformation {
  background-color: white;
  min-height: 200px;
  margin-bottom: 20px;

  > .content-head {
    > h2 {
      font-weight: bolder;
    }
  }

  > .content-body {
    padding: 10px 20px;

    > div {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      h2 {
        font-size: 15px;
        font-weight: bolder;
        margin-right: 5px;
      }

      span {
        color: #333;
      }
    }
  }
}
</style>